<template>
  <div>
    <br />
    <Input
      v-model="name"
      placeholder="Enter search name..."
      style="width: 300px"
      clearable
      @on-clear="searchTable"
    />
    <Button type="success" @click="search">搜索</Button>
    <br />
    <br />
    <Table :columns="columns" :data="tableDate">
      <template slot-scope="{ row, index }" slot="action">
        <Button
          type="primary"
          size="small"
          style="margin-right: 5px"
          @click="show(index, row)"
          >修改</Button
        >
        <Button type="error" size="small" @click="remove(index)">删除</Button>
      </template>
    </Table>
    <!-- <Modal v-model="modal" title="修改信息" @on-ok="ok" @on-cancel="cancel">
      <Form ref="formInline" :model="formInline" class="login_box">
        <FormItem prop="user">
          <Input
            type="text"
            v-model="formInline.name"
            placeholder="Username"
            clearable
          >
            <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="nickname">
          <Input
            type="text"
            v-model="formInline.nickname"
            placeholder="text"
            clearable
          >
            <Icon type="ios-lock-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="email">
          <Input
            type="email"
            v-model="formInline.email"
            placeholder="email"
            clearable
          >
            <Icon type="md-cloud-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
      </Form>
    </Modal> -->
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      name: '',
      tableDate: [],
      modal: false,
      columns: [
        {
          title: '书名',
          key: 'name'
        },
        {
          title: '别名',
          key: 'alias'
        },
        {
          title: '描述',
          key: 'describe'
        },
        {
          title: '操作',
          slot: 'action',
          width: 200,
          align: 'center'
        }
      ]
    }
  },
  mounted() {
    this.getTableData()
    console.log(this.name)
  },
  methods: {
    search() {
      if (this.name === null || this.name === '') {
        this.getTableData()
        console.log('sss')
      } else {
        axios.get(`/liz/serchArt/${this.name}`).then((res) => {
          this.tableDate = res.data.data
        })
      }
    },
    searchTable() {
      console.log('qkl')
      this.getTableData()
    },
    getTableData() {
      axios.get('/liz/article').then((res) => {
        if (res.data.status === 200) {
          this.$Message.success('获取成功')
          this.tableDate = res.data.data
        } else {
          this.$Message.error(res.data.message)
        }
      })
    }
  }
}
</script>

<style>
</style>
